<template>
  <el-tabs
    ref="tabsConstom"
    :class="['de-tabs-component',...tabClassName]"
    :style="tabStyle"
    v-bind="$attrs"
    v-on="$listeners"
  >
    <slot />
  </el-tabs>
</template>

<script>
export default {
  name: 'DataeaseTabs',
  props: {
    hideTitle: Boolean,
    fontColor: String,
    activeColor: String,
    borderColor: String,
    borderActiveColor: String,
    styleType: {
      type: String,
      default: '',
      validator: (val) => ['', 'radioGroup'].includes(val)
    }
  },
  data() {
    return {}
  },
  computed: {
    tabStyle() {
      return {
        '--font-color': this.fontColor,
        '--active-color': this.activeColor,
        '--border-color': this.borderColor,
        '--border-active-color': this.borderActiveColor
      }
    },
    tabClassName() {
      const classes = [
        this.styleType,
        this.fontColor && 'fontColor',
        this.activeColor && 'activeColor',
        this.noBorder ? 'noBorder' : this.borderColor && 'borderColor',
        this.borderActiveColor && 'borderActiveColor',
        this.hideTitle && 'no-header'
      ]
      return classes
    },
    noBorder() {
      return this.borderColor === 'none'
    },
    noBorderActive() {
      return this.borderActiveColor === 'none'
    }
  },
  created() {},
  methods: {}
}
</script>
<style lang="scss">
@import "../../styles/de-tabs-component";

</style>

